<template>
  <div class="dfsp login">
    <div class="login-top">
      <el-dropdown class="my_dropdown">
        <img class="lang" src="@/style/img/login/lang.png" alt="" />
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item
              v-for="(item, index) in LangList"
              :key="index"
              @click.native="toggle(item.code)"
            >
              {{ item.title }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div class="login-footer">
      <div class="loginbg">
        <div class="left-logo">
          <img src="@/style/img/leftlogo.png" />
        </div>
        <div class="left-text">
          <span>{{ t('index') }}</span>
          <el-divider direction="vertical" />
          <span>{{ t('futures') }}</span>
          <el-divider direction="vertical" />
          <span>{{ t('exchangeRate') }}</span>
        </div>
        <!-- <div style="width: 55%">
          <particles></particles>
        </div> -->
        <!-- <img class="logo" src="@/style/img/logo.png" alt="">
        <img class="logotext" src="@/style/img/logotext.png" alt=""> -->
      </div>
      <div class="right">
        <div class="loginform">
          <!-- <div class="">
            <img class="logo" src="@/style/img/logo.png" alt="" />
          </div> -->
          <div class="logon-text">
            {{ t('logon') }}
          </div>
          <el-form ref="refruleForm" :model="ruleForm" :rules="rules">
            <el-form-item prop="username">
              <el-input
                :prefix-icon="User"
                v-model="ruleForm.username"
                size="large"
                :placeholder="t('pleaseenteraccount')"
              />
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                :prefix-icon="Lock"
                :type="showpassword ? 'text' : 'password'"
                v-model="ruleForm.password"
                size="large"
                :placeholder="t('pleaseenterpassword')"
              >
                <template #append>
                  <el-icon v-if="showpassword" @click="showpassword = false">
                    <View />
                  </el-icon>
                  <el-icon v-else @click="showpassword = true">
                    <Hide />
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item v-show="!verify">
              <slideVerify @update:setverify="setverify"></slideVerify>
            </el-form-item>
            <el-button
              v-show="verify"
              v-loading="loading"
              :disabled="loading"
              class="btn btnbg"
              @click="submitForm(refruleForm)"
              size="large"
              >{{ t('logon') }}</el-button
            >
          </el-form>
          <div class="loginform_end dfsp" :style="!verify ? 'margin-top:-20px' : ''">
            <div>
              <router-link ref="tag" class="TagView" :to="{ path: '/register' }" tag="span">
                {{ t('register') }}
              </router-link>
            </div>
            <div>
              <router-link ref="tag" class="TagView" :to="{ path: '/forgotpassword' }" tag="span">
                {{ t('forgotpassword') }}
              </router-link>
            </div>
          </div>
          <!-- <div class="copyright size14">Copyright 2023 恩嘉科技 版权所有</div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Particles from '@/components/particles/index.vue'
import slideVerify from '@/components/slideVerify.vue'
const verify = ref(false)
const setverify = () => {
  verify.value = true
}

import { setToken } from '../../utils/cookies.js'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
import { useStore } from 'vuex'
const store = useStore() //vuex
import { useRouter } from 'vue-router'
const router = useRouter() //路由
import { reactive, ref, onMounted, getCurrentInstance } from 'vue'
import { User, Lock, View, Hide } from '@element-plus/icons-vue'

const { proxy } = getCurrentInstance()
const showpassword = ref(false)
// 语言
const LangList = reactive([
  {
    title: t('zh'),
    code: 'zh',
  },
  {
    title: t('zhtw'),
    code: 'zhtw',
  },
  // {
  // 	title: t('nogu'),
  // 	code: 'nogu'
  // },
])
import Cookies from 'js-cookie'
const { locale: i18nLanguage } = useI18n()
const toggle = (languageKey) => {
  i18nLanguage.value = languageKey
  store.state.Lang = languageKey
  Cookies.set('Lang', languageKey)
  // setToken("Lang", languageKey)
  location.reload()
}
//表单
const Form = {
  username: '',
  password: '',
}
const ruleForm = reactive(Form) //表单
const refruleForm = ref(null) //表单验证
const loading = ref(false) //加载

const rules = reactive({
  username: [
    {
      required: true,
      message: t('pleaseenteraccount'),
      trigger: 'change',
    },
  ],
  password: [
    {
      required: true,
      message: t('pleaseenterpassword'),
      trigger: 'change',
    },
  ],
})
// 点击登录
const submitForm = async (formEl) => {
  loading.value = true
  await formEl.validate((valid, fields) => {
    if (valid) {
      proxy
        .$post('/mt4/Login/login', ruleForm)
        .then((res) => {
          if (res.code == 1) {
            store.dispatch('SETTOKNE', res.data.token)
            router.push('/')
          }
          loading.value = false
        })
        .catch((res) => {
          loading.value = false
        })
    } else {
      loading.value = false
    }
  })
}
</script>

<style scoped lang="scss">
@import '../../style/scss/login.scss';
</style>
